//
//  FitnessListDetail.swift
//  Kosspot
//
//  Created by 李鑫 on 2025/6/30.
//

import SwiftUI
import URLImage

struct FitnessListDetail: View {
    @EnvironmentObject var appState: AppState
    let item: Article
    var body: some View {
        ScrollView {
            ZStack(alignment: .topLeading) {
                if let fullURL = URL(string: item.coverImageUrl){
                    URLImage(url: fullURL) { image in
                        image
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: Bounds.width,height: 280)
                            .padding(.top,0)
                            .opacity(0.6)
                            .clipped()
                    }
                } else {
                    Image("25 1")
                        .resizable()
                        .scaledToFit()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: Bounds.width,height: 280)
                        .padding(.top,12)
                        .clipped()
                }
                VStack {
                    HStack {
                        Button(action: {
                            appState.navigateBack()
                        }) {
                            Image("back")
                        }
                        .frame(width: 16,height: 16)
                        Spacer()
                    }
                    .padding(.top,58)
                    .padding(.leading,12)
                    
                    Spacer().frame(height: 110)
                    HStack {
                        Text(item.title)
                            .font(.system(size: 22))
                            .foregroundStyle(.white)
                            .padding(.leading,28)
                            .frame(height: 22)
                        Spacer()
                    }
                   
                    Spacer().frame(height: 10)
                    HStack {
                        Text(item.subtitle)
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B0B0B0"))
                            .padding(.leading,28)
                            .frame(height: 14)
                        Spacer()
                    }
                }
                
                VStack {
                    HStack {
                        Text("计划简介")
                            .font(.system(size: 20))
                            .foregroundStyle(.white)
                            .frame(height: 20)
                            .padding(.leading,16)
                        Spacer()
                    }
                    .padding(.top,20)
                    Spacer().frame(height: 18)
                    
                    HStack {
                        Text(item.subtitle)
                            .font(.system(size: 16))
                            .foregroundStyle(.white)
                            .frame(height: 16)
                            .padding(.leading,16)
                        Spacer()
                    }
                   
                    Spacer().frame(height: 12)
                    Text(item.content)
                        .font(.system(size: 14))
                        .foregroundStyle(Color(hex: "#E6E6E6"))
                        .padding(.leading,14)
                        .padding(.trailing,14)
                    Spacer()
                }
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16)
                .frame(height: 270)
                .padding(.top,250)
                .padding(.horizontal,12)
            }
        }
        .background(Color(hex: "#0A0A0A"))
        .edgesIgnoringSafeArea(.all)
        .navigationBarHidden(true)
    }
}
